<template>
	<div id="Product_ist">
		<div class="top_nav" v-show="topshow">
			<p class="on">
				<span>商品</span>
				<span></span>
			</p>
			<p>
				<span>店铺</span>
				<span></span>
			</p>
		</div>
		<ul>
			<li>
				<span>综合</span>
				<span class="iconfont icon-xiangxiajiantou"></span>
			</li>
			<li>
				<span>销量</span>
			</li>
			<li>
				<span>价格</span>
				<span class="iconfont icon-shangxiajiantou"></span>
			</li>
			<li>
				<span>筛选</span>
				<span class="iconfont icon-shaixuan"></span>
			</li>
		</ul>
		<div class="list">
			<ul class="ulleft">
				<li v-for="(item,index) in list" :key="index"
					@click="$router.push('/home/homedetailed/'+item.product_id)" v-if="index % 2 == 0">
					<ol>
						<li>
							<img :src="item.image" alt="">
						</li>
						<li>
							<p>{{ item.store_info }}</p>
						</li>
						<li>
							<h4><span>￥</span>{{ item.price }}</h4>
						</li>
						<li>
							<span>{{ item.merchant.type_name }}</span>
							<span>包邮</span>
						</li>
						<li>
							<span>{{ item.rate }}评分</span>
							<span>{{ item.reply_count }}条评论</span>
						</li>
						<li>
							<p>{{ item.merchant.mer_name }}</p>
						</li>
					</ol>
				</li>
			</ul>
			<ul class="ulright">
				<li v-for="(item,index) in list" :key="index"
					@click="$router.push('/home/homedetailed/'+item.product_id)" v-if="index % 2 != 0">
					<ol>
						<li>
							<img :src="item.image" alt="">
						</li>
						<li>
							<p>{{ item.store_info }}</p>
						</li>
						<li>
							<h4><span>￥</span>{{ item.price }}</h4>
						</li>
						<li>
							<span>{{ item.merchant.type_name }}</span>
							<span>包邮</span>
						</li>
						<li>
							<span>{{ item.rate }}评分</span>
							<span>{{ item.reply_count }}条评论</span>
						</li>
						<li>
							<p>{{ item.merchant.mer_name }}</p>
						</li>
					</ol>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 商品数据
			list: {
				typeof: Array,
				default: []
			},
			// 商品-店铺选项  是否显示
			topshow: {
				typeof: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#Product_ist {
		.top_nav {
			width: 100vw;
			height: 40 * $width;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: #e93323;

			p {
				color: #fff;
				font-size: 16 * $width;
			}

			.on {
				font-weight: 600;
				display: flex;
				flex-direction: column;
				align-items: center;

				span:nth-of-type(2) {
					display: inline-block;
					width: 15 * $width;
					height: 2 * $width;
					background-color: #fff;
				}
			}
		}

		>ul {
			width: 100%;
			height: 44 * $width;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: #fff;

			li {

				span {
					color: #454545;
				}

				.iconfont {
					margin-left: 3 * $width;
					font-size: 14 * $width;
				}
			}
		}

		.list {
			display: flex;

			.ulleft,
			.ulright {
				// justify-content: space-evenly;
				// flex-wrap: wrap;

				>li {
					width: 172 * $width;
					box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
					background-color: #fff;
					border-radius: 10 * $width;
					margin-top: 10 * $width;
					padding-bottom: 10 * $width;
					margin-left: 10 * $width;

					ol {
						li {
							padding: 0 10 * $width;

							img {
								width: 172 * $width;
							}
						}

						li:nth-of-type(1) {
							padding: 0;
						}

						li:nth-of-type(2) {
							p {
								color: #454545;
								font-size: 12 * $width;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}

						li:nth-of-type(3) {
							h4 {
								color: #e93323;
								line-height: 22 * $width;
								font-size: 16 * $width;

								span {
									font-size: 12 * $width;
								}
							}
						}

						li:nth-of-type(4) {
							span:nth-of-type(1) {
								display: inline-block;
								align-items: center;
								background: #e93424;
								color: #fff;
								font-size: 10 * $width;
								text-align: center;
								border-radius: 2 * $width;
								padding: 0 2 * $width;
								line-height: 14 * $width;
								margin-right: 4 * $width;
								border: 0.5 * $width solid #e93424;
							}

							span:nth-of-type(2) {
								color: #ff9000;
								border: 0.5 * $width solid #ff9000;
								font-size: 10 * $width;
								text-align: center;
								border-radius: 2 * $width;
								padding: 0 2 * $width;
								height: 14 * $width;
								align-items: center;
								justify-content: center;
								margin-right: 4 * $width;
							}
						}

						li:nth-of-type(5) {
							margin: 3 * $width 0;

							span {
								color: #737373;
								font-size: 10 * $width;
								margin-right: 8 * $width;
							}
						}

						li:nth-of-type(6) {
							p {
								color: #737373;
								font-size: 10 * $width;
							}
						}
					}
				}
			}
		}
	}
</style>
